<template>
  <div class="card-item-wrap" :style="{background:bgColor}">
    <div>{{label}}</div>
    <div class="white-line"/>
    <div>
      <countTo :startVal='0' :endVal='count' :duration='1500'/>
    </div>
  </div>
</template>
<script>
    import countTo from 'vue-count-to'
    export default {
        components: {
            countTo
        },
        data(){
            return {
                bgColor:"",
                label:"",
                count:0
            }
        },
        methods: {
            init(obj){
                const {bgColor, label, count} = obj
                this.bgColor = bgColor
                this.label = label
                this.count = count*1
            }
        }
    }
</script>
<style scoped>
  .card-item-wrap{
    cursor: pointer;
    margin: 0 10px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .white-line{
    height:100%;
    width:1px;
    background:#ffffff;
  }
  .card-item-wrap div:first-child{
    flex:2;
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    color:#fff;
  }
  .card-item-wrap div:last-child{
    flex:1;
    text-align: center;
    font-size: 40px;
    font-weight: bolder;
    color: #fff;
  }
</style>
